<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.ToDoList</title>

    <!--<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>


<div id="app">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    ToDoList
                </a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <div class="panel panel-warning">
                    <div class="panel-heading">
                       <h3 class="text-danger" >^_^ 你有 {{count}} 件事待完成 </h3>
                        <input type="text" class="form-control" v-model="newTodo" @keyup.enter="addList">
                    </div>
                    <div class="panel-body">

                        <ul class="list-group">
                            <li class="list-group-item" v-for="model in todos">
                                <input type="checkbox" v-model="model.isSelected"> {{model.title}}
                                <button class="pull-right btn btn-danger btn-xs" @click="delList(model)">&times;</button>
                            </li>

                        </ul>
                    </div>
                    <div class="panel-footer">
                        <ul class="nav nav-pills">
                            <li ><a href="#">全部任务</a></li>
                            <li ><a href="#">已完成</a></li>
                            <li ><a href="#">未完成</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>

<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./node_modules/vue/dist/vue.js"></script>

<script src="./8.ToDoList-1.js"></script>

</body>
</html>